<template>
  <div class="g-bd">
    <div class="main f-fl" v-if="playDetail">
      <div class="detail-wrap clearfix">
        <!-- 歌曲照片 -->
        <div class="cvrwrap f-fl">
          <div class="u-cover">
            <img
              alt=""
              :src="playDetail.coverImgUrl + '?param=200y200'"
              v-if="playDetail.coverImgUrl"
            />
            <span class="msk"></span>
          </div>
        </div>
        <!-- 歌曲详细内容 -->
        <div class="detail f-fr">
          <div class="hd">
            <div class="u-icn"></div>
            <div class="tit">{{ playDetail.name }}</div>
          </div>
          <!-- 歌手 -->
          <div class="user" v-if="playDetail.creator">
            <a href="" class="avatar"
              ><img :src="playDetail.creator.avatarUrl + '?param=40y40'" alt=""
            /></a>
            <span class="name"><a href="">云音乐官方歌单</a></span>
            <img
              v-if="playDetail.creator.avatarDetail !== null"
              :src="
                playDetail.creator.avatarDetail.identityIconUrl
                  ? playDetail.creator.avatarDetail.identityIconUrl
                  : ''
              "
              alt=""
            />
            <span class="time">{{ playDetail.createTime | createTimeFormat }} 创建</span>
          </div>
          <!-- 操作按钮 -->
          <div class="tmhi-btn">
            <a
              href="javasscript:void(0);"
              class="play u-btn2"
              title="播放"
              @click="playList(playDetail.tracks)"
              ><i><em class="icon-play u-btn2"></em>播放</i></a
            >
            <a
              href="javascript:void(0);"
              class="add u-btn2"
              title="添加到播放列表"
              @click="addToPlayList(playDetail.tracks)"
            ></a>
            <a href="javascript:void(0);" class="subscribed-count u-btn2" @click="operationClick"
              ><i>({{ playDetail.subscribedCount | CountFormat }})</i></a
            >
            <a href="javascript:void(0);" class="share-count u-btn2 btn2" @click="operationClick"
              ><i>({{ playDetail.shareCount | CountFormat }})</i></a
            >
            <a href="javascript:void(0);" class="download u-btn2 btn2" @click="operationClick"
              ><i>下载</i></a
            >
            <a href="javascript:void(0);" class="comment-count u-btn2 btn2" @click="operationClick"
              ><i>({{ playDetail.commentCount | CountFormat }})</i></a
            >
          </div>
          <!-- 标签 -->
          <div class="tag clearfix">
            <span class="title">标签：</span>
            <router-link
              :to="`/discover/playlist/?cat=${tag}&order=hot`"
              class="u-tag"
              v-for="tag in playDetail.tags"
              :key="tag"
              ><i>{{ tag }}</i></router-link
            >
          </div>
          <!-- 描述 -->
          <div class="desc">
            <span class="title">介绍：</span>
            <div class="desc" v-html="playDetail.desc"></div>
            <div class="hidedesc" v-html="playDetail.hidedesc" v-show="flat"></div>
            <div class="flat" v-if="playDetail.hidedesc">
              <a href="javascript:void(0)" @click="flat = !flat"
                >{{ flat ? '收起' : '展开' }} <i class="u-icn" :class="flat ? 'u-icn-70' : ''"></i
              ></a>
            </div>
          </div>
        </div>
      </div>
      <!-- 榜单列表 -->
      <div class="tm-list">
        <!-- 榜单标题 -->
        <div class="tml-title">
          <h3>歌曲列表</h3>
          <span class="sub">
            <span>{{ playDetail.trackCount }}</span
            >首歌</span
          >
          <!-- <span>{{  }}</span
            >首歌</span
          > -->
          <div class="play-count">
            播放：<strong>{{ playDetail.playCount }}</strong
            >次
          </div>
          <div class="outer-link">
            <i class="u-icn"></i>
            <a href="javascript:;" @click="$Message({ msg: '功能尚未开发' })">生成外链播放器</a>
          </div>
        </div>
        <!-- 歌曲列表 -->
        <div class="tml-song-list">
          <div class="tmls-wrap">
            <MyTable :list="playDetail.tracks" :TheadData="[{ name: '专辑', key: 'album' }]">
              <template #rankIcon="slotProps">
                <a
                  href="javascript:;"
                  class="u-table f-fr cover"
                  :class="slotProps.row.id === currentSongId ? 'z-sel' : ''"
                  @click="playSong(slotProps.row)"
                  ></a>
              </template>
              <template #album="slotProps">
                <router-link :to="`/album?id=${slotProps.row.al.id}`" class="f-thide album">{{ slotProps.row.al.name }}</router-link>
              </template>
            </MyTable>
          </div>
        </div>
        <!-- 查看更多 -->
        <div class="play-list-more">
          <p>查看更多内容，请下载客户端</p>
          <router-link to="/download" class="download">立即下载</router-link>
        </div>
      </div>
      <!-- 评论 -->
      <Comment :id="$route.query.id" :type="2"></Comment>
    </div>
    <div class="aside f-fr">
      <h3 class="u-hd3">喜欢这个歌单的人</h3>
      <ul class="piclist" v-if="playDetail">
        <li v-for="sub in playDetail.subscribers" :key="sub.id">
          <a :href="`/user/home?id=${sub.userId}`" @click.prevent="$router.push(`/user/home?id=${sub.userId}`)" :title="sub.nickname">
            <img :src="sub.avatarUrl + '?param=40y40'" alt="" />
          </a>
        </li>
      </ul>
      <h3 class="u-hd3">热门歌单</h3>
      <ul class="hotlist" v-if="hotList">
        <li v-for="item in hotList" :key="item.id" class="clearfix">
          <a
            :href="'/playlist?id=' + item.id"
            class="coverImg"
            @click.prevent="$router.push('/playlist?id=' + item.id)"
          >
            <img :src="item.coverImgUrl + '?param=50y50'" alt="" v-if="item.coverImgUrl" />
          </a>
          <p class="name">
            <a
              :href="'/playlist?id=' + item.id"
              @click.prevent="$router.push('/playlist?id=' + item.id)"
              >{{ item.name }}</a
            >
          </p>
          <p v-if="item.creator">
            <span class="by">by</span
            ><a
              :href="'/user/home?id=' + item.creator.userId"
              class="nickname"
              @click.prevent="$router.push('/user/home?id=' + item.creator.userId)"
              >{{ item.creator.nickname }}</a
            >
            <!-- <img :src="item.creator.avatarDetail.identityIconUrl ? item.creator.avatarDetail.identityIconUrl : ''" alt="" class="identity" /> -->
          </p>
        </li>
      </ul>
      <div class="download">
        <h3 class="u-hd3">网易云音乐多端下载</h3>
        <ul class="dllist">
          <li><a href="https://itunes.apple.com/cn/app/id590338362" class="ios"></a></li>
          <li><a href="https://music.163.com/api/pc/download/latest" class="pc"></a></li>
          <li><a href="https://music.163.com/api/android/download/latest2" class="aos"></a></li>
        </ul>
        <p>同步歌单，随时畅听320k好音乐</p>
      </div>
      <h3 class="u-hd3">用户wiki</h3>
      <a href="" class="wiki-edit"
        ><img src="@/assets/images/obj_wo.png" alt="" /> 补充或修改歌曲资料</a
      >
      <a href="" class="wiki-edit"
        ><img src="@/assets/images/obj_wo1.png" alt="" /> 用户wiki任务中心</a
      >
    </div>
  </div>
</template>

<script>
import Comment from '@/components/Comment/Comment.vue'
import MyTable from '@/components/Table/Table.vue'
import { CountFormat, createTimeFormat, songDuration } from '@/utils/filters.js'
import { operationClick } from '@/utils/methods.js'
import {playList,topPlayList} from '@/api/playlist.js'
export default {
  components: { Comment, MyTable },
  data() {
    return {
      playDetail: null,
      // 歌单介绍是否展开
      flat: false,
      hotList: null
    }
  },
  methods: {
    // 获取歌单详情
    async getPalyDetail() {
      const { data } = await playList(this.$route.query.id)
      // 处理歌单介绍
      const reg = /\n/g
      const desc = data.playlist.description
      const descList = desc.split(reg)

      data.playlist.desc = descList.slice(0, 15).join('</br>')
      data.playlist.hidedesc = descList.slice(15).join('</br>')
      this.playDetail = data.playlist
      // 处理艺术家名称
      let artisName = []
      this.playDetail.tracks.forEach(item => {
        item.ar.forEach(artis => {
          artisName.push(artis.name)
        })
        item.arname = artisName.join('/')
        artisName = []
      })
    },
    // 获取热门歌单 /top/playlist?limit=10&order=new
    async getHotPlayList() {
      const params = { order: 'hot', cat: '全部', limit: 5, offset: 0 }
      const { data } = await topPlayList(params)
      this.hotList = data.playlists
    },
    // 将播放列表替换为榜单列表
    playList(tracks) {
      this.$store.commit('Music/setplayerSettingIndex', 0)
      this.$store.commit('Music/setSongList', tracks)
    },
    // 添加到播放列表
    addToPlayList(tracks) {
      this.$store.commit('Music/pushSongList', tracks)
    },
    playSong(tracks) {
      console.log('test-3 tracks',tracks.name)
      const songidList = []
      let index = -1
      const songList = this.$store.state.Music.songList
      songList.forEach(item => {
        songidList.push(item.id)
      })
      if (songidList.includes(tracks.id)) {
        index = songidList.findIndex(item => item === tracks.id)
      } else {
        this.$store.commit('Music/pushSongList', tracks)
      }
      this.$store.commit('Music/setplayerSettingIndex', index == -1 ? songList.length - 1 : index)
    },
    operationClick
  },
  filters: {
    CountFormat,
    createTimeFormat,
    songDuration
  },
  watch: {
    $route(to, from) {
      if (to.path.includes('playlist')) {
        this.getPalyDetail()
        this.getHotPlayList()
      }
      window.scrollTo(0, 0)
    }
  },
  computed: {
    // 当前歌曲id
    currentSongId() {
      const id = this.$store.state.Music.currentSong.id
        ? this.$store.state.Music.currentSong.id
        : undefined
      return id
    }
  },
  created() {
    this.getPalyDetail()
    this.getHotPlayList()
    // this.getLrc()
    // this.getSimSong()
  }
}
</script>

<style lang="less" scoped>
@import './PlayListDetail.less';
</style>
